<template>
  <nav>
    <div class="sidebar-header">
      <router-link to="/">
        <i class="icon-control"></i><span> 控制台总览</span>
      </router-link>
    </div>
    <my-tree v-for="menuItem in theModel" :model="menuItem, activeName"></my-tree>
  </nav>
</template>

<script>
  import myTree from './TreeMenu.vue'

  export default {
    components: {
      myTree
    },
    data () {
      return {
        theModel: {},
        activeName: ''
      }
    },
    mounted () {
      this.$http.get('src/json/tree.json').then(response => {
        this.theModel = response.data
      }, response => {

      })
    }
  }
</script>

<style>
  nav{
    float:left;
    background: #2c3e50;
    width:180px;
    height: 100%;
    overflow: auto;
    overflow-x: hidden;
    overflow-y: hidden;
  }
  .sidebar-header{
    width:100%;
    background: #222f3c;
    color:#fff;
    line-height: 2.5;
    text-indent: 16px;
    cursor: pointer;
  }
  .sidebar-header a{
    color:#fff;
    text-decoration: none;
  }
  .sidebar-header:hover a{
    text-decoration: none;
  }
  .icon-control{
    position: relative;
    top:3px;
    display: inline-block;
    width:16px;
    height:16px;
    background: url('../assets/icon/icon_control.png') no-repeat center center;
  }
  .sidebar-list{
    width:100%;
    background:#334659;
    line-height: 2.9;
    color:#fff;
    cursor: pointer;
    text-indent: 16px;
  }
  .sidebar-list .icon-arrow{
    position: relative;
    top:4px;
    display: inline-block;
    width:16px;
    height:16px;
    background: url('../assets/icon/arrow.png') no-repeat center center;
    -vertical-align: middle;
    transition: transform 0.12s;
    -o-transition: -o-transform 0.12s;
    -ms-transition: -ms-transform 0.12s;
    -moz-transition: -moz-transform 0.12s;
    -webkit-transition: -webkit-transform 0.12s;
  }
  .icon-arrow-open{
    transform: rotate(90deg);
  }
  .sidebar-item{
    background: #222f3c;
    line-height: 2.9;
    color: #fff;
    cursor: pointer;
    text-indent: 16px;
  }
  .sidebar-list a,
  .sidebar-item a,
  .nav-sub-item a{
    width: 100%;
    height: 100%;
    display: block;
  }
  .sidebar-item span{
    color:#fff;
  }
  .sidebar-list:hover,
  .sidebar-item:hover
  {
    background: #485f75;
    text-decoration: none;
  }
  .sidebar-list.active,
  .sidebar-item.active
  {
    background-color: #ff6579;
  }
  .sidebar-list:hover a,
  .sidebar-item:hover a,
  .nav-sub-item:hover a
  {
    text-decoration: none;
  }
  .sidebar-list:hover [class^="icon-"],
  .sidebar-list:active [class^="icon-"],
  .sidebar-item:hover [class^="icon-"],
  .sidebar-item.active [class^="icon-"]
  {
    opacity:1;
  }
  .sidebar-list span{
    overflow: hidden;
    color: #fff;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .icon-doc {
    background-image: url(../assets/icon/icon_doc.png);
  }
  .icon-data {
    background-image: url(../assets/icon/icon_data.png);
  }
  .tree-menu li {
    line-height: 1.5;
  }
</style>
